<template>
  <div class="app-container">
    <!-- 商家介绍 -->
    <el-card class="box-card">
      <h3>商家编辑</h3>
      <el-form
        ref="business"
        :rules="rules"
        :model="business"
        label-width="150px"
      >
        <!-- <el-form-item label="商家编号" prop="businessId">
          <el-input v-model="business.businessId" />
        </el-form-item> -->
        <el-form-item label="商家名称" prop="businessName">
          <el-input v-model="business.businessName"/>
        </el-form-item>
        <el-form-item label="商家地址" prop="businessAddress">
          <el-input v-model="business.businessAddress"/>
        </el-form-item>
        <el-form-item label="费用设置">
          <el-row :gutter="1">
            <el-col :offset="0" :span="10">
              <el-form-item label="起送费" prop="startPrice">
                <el-input v-model="business.startPrice" placeholder="0.00">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="配送费" prop="deliveryPrice">
                <el-input v-model="business.deliveryPrice" placeholder="0.00">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="点餐类别">
          <el-select v-model="business.orderTypeId">
            <el-option
              v-for="(item, index) in orderTypes"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商家图片">
          <el-upload
            ref="upload"
            :action="uploadPath"
            :before-upload="handleChangeFile"
            :show-file-list="false"
            list-type="picture"
            :headers="headers"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
            :auto-upload="true"
            :multiple="true"
          >
            <img
              v-if="business.businessImg"
              :src="business.businessImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>

        <el-form-item label="商家备注">
          <el-input v-model="business.remarks"/>
        </el-form-item>

        <el-form-item label="商家介绍">
          <editor v-model="business.businessExplain"/>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 更新取消按钮 -->
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新商家</el-button>
    </div>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>

<script>
import {detailBusiness, editBusiness, listCatAndBrand} from "@/api/business/business";
import {createStorage, uploadPath} from "@/api/system/storage";
import Editor from "@/components/TEditor.vue";
import {MessageBox} from "element-ui";
import {getToken} from "@/utils/auth";

export default {
  name: "BusinessEdit",
  components: {Editor},
  data() {
    return {
      orderTypes: [
        {label: "美食", value: 1},
        {label: "早餐", value: 2},
        {label: "跑腿代购", value: 3},
        {label: "汉堡披萨", value: 4},
        {label: "甜品饮品", value: 5},
        {label: "速食简餐", value: 6},
        {label: "地方小吃", value: 7},
        {label: "米粉面馆", value: 8},
        {label: "包子粥铺", value: 9},
        {label: "炸鸡炸串", value: 10},
      ],
      uploadPath: process.env.VUE_APP_TARGET_API + "/upload", // 文件上传路径
      business: {businessImg: ""}, // 商家信息
      // 表单验证规则
      rules: {
        businessId: [
          {required: true, message: "商家编号不能为空", trigger: "blur"},
        ],
        businessName: [
          {required: true, message: "商家名称不能为空", trigger: "blur"},
        ],
      }

    };
  },
  computed: {
    // 上传请求头
    headers() {
      return {
        "Shopping-Admin-Token": getToken(),
      };
    },
  },
  created() {
    // 页面数据初始化
    this.init();
  },
  methods: {
    handleChangeFile(file, fileList) {
      if (!file) return;
      // suffix：后缀名 ，如：hello.jpg
      var suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const limit = file.size / 1024 / 1024 < 1;
      if (suffix !== "jpg" && suffix !== "png" && suffix !== "bmp") {
        this.$refs.upload.clearFiles();
        this.$message({
          message: "上传文件只能是 .jpg、.png、bmp格式!",
          type: "warning",
        });
        return false;
      }
      if (!limit) {
        this.$refs.upload.clearFiles();
        this.$message({
          message: "上传文件大小必须小于1MB!",
          type: "warning",
        });
        return false;
      }
    },
    // 获取数据 ，判断是否有商家id传入
    init: function () {
      if (this.$route.query.id == null) {
        return;
      }

      const businessId = this.$route.query.id;

      detailBusiness(businessId).then((response) => {
        this.business = response.data;
      });
    },

    // 更新商家钩子
    handleEdit: function () {
      // 调用接口
      editBusiness(this.business)
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "编辑商家成功",
          });
          this.$router.push({path: "/business/index"});
        })
        .catch((response) => {
          MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
            confirmButtonText: "确定",
            type: "error",
          });
        });
    },

    // 取消更新商家
    handleCancel() {
      this.init();
      // console.log("-----cancel business update 0000");
      // this.$router.go(0); // 刷新当前路由页面
      // let id = this.$route.query.id;
      // console.log("-----cancel business id:%d", id);
      // this.$router.push({ path: "/business/index" });
    },

    // 获取图片上传路径
    uploadPicUrl: function (response) {
      this.business.businessUrl = response.data.url;
    }


  }
};
</script>
